<template>
	<view class="index-page">
		<!-- <view class="header-bg"></view> -->
		<view class="index-form">
			<view class="input_item">
				<text class="t1">姓名:</text>
				<input class="input1" placeholder-class="bbb" type="text" placeholder="输入称呼" />
				<text class="t2 bbb">选择分组&gt;</text>
			</view>
			<view class="input_item">
				<text class="t1">性别:</text>
				<radio-group class="radio-group" name="">
					<label class="radio">
						<radio value="1" checked="" color="#ff6d1a" /><text>男</text>
					</label>
					<label class="radio">
						<radio value="2" color="#ff6d1a" /><text>女</text>
					</label>
				</radio-group>
				<text class="t2 bbb">标签备注&gt;</text>
			</view>
			<view class="input_item">
				<text class="t1">起盘:</text>
				<view class="time1 bbb">
					1990-01-01 00:00 &gt;
				</view>
				<view class="ccc">四柱反查</view>
				<view class="use_audio ccc">
					<image src="@/static/images/yuyin_o.png" mode=""></image> 语音 <text class="bbb">&gt;</text>
				</view>
			</view>
			<view class="input_item">
				<text class="t1">地区:</text>
				<view class="area1 bbb">
					选择地区 &gt;
				</view>
				<view class="area-info ccc">
					<view class="ai1">真太阳时：1990-01-01 00:00</view>
					<view class="ai2">地址经纬：北纬39.9 东经116.4</view>
				</view>
			</view>
			<view class="input_2_item">
				<view class="t1">
					<view>公历: 2022年08月20日 12:19</view>
					<view>农历: 2022年七月廿三 午时</view>
				</view>
				<view class="t2">
					<view class="t2-1">
						当前:<br />
						排盘
					</view>
					<view class="t2-2">
						<text>壬<br />寅</text>
						<text>戊<br />申</text>
						<text>乙<br />卯</text>
						<text>壬<br />午</text>
					</view>
				</view>
				<view class="t3">
					<switch color="#ff6d1a" />保存八字
				</view>
			</view>
			<view class="start-btn">
				开始排盘
			</view>
		</view>

		<view class="fixed-more">
			<view class="inner">
				更多
			</view>
		</view>

		<!-- 四柱 -->
		<view class="sizhu-reverse-con" style="display: none;">
			<view class="sizhu-main">
				<view class="title1">四柱反排</view>
				<view class="tiangan-dizhi-c">
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
					<text>甲</text>
				</view>
				<view class="title2">
					<text>年柱</text>
					<text>月柱</text>
					<text>日柱</text>
					<text>时柱</text>
				</view>
				<view class="sz-con">
					<view class="active">己</view>
					<view>己</view>
					<view>己</view>
					<view>己</view>
				</view>
				<view class="sz-con">
					<view>巳</view>
					<view>巳</view>
					<view>巳</view>
					<view>巳</view>
				</view>
				<view class="yearc">查找范围：1900年-2100年</view>
				<view class="sizhu-btn-con">
					<view class="btn-cancel">取消</view>
					<view class="btn-confirm">完成</view>
				</view>
			</view>
		</view>

		<!-- 录音 -->
		<view class="audio_mask" v-if="audioInfo.audioIsShow">

			<view class="audio_error audio_ing" v-show="!audioInfo.audioIngShow">
				<view class="close_btn" @click="closeAudio()">×</view>
				<view class="title">语音识别</view>
				<image class="err_img" src="@/static/images/error.jpg" mode=""></image>
				<view class="error red">识别失败</view>
				<view class="msg">请在40秒内按照举例格式再说一遍吧！</view>
				<view class="btn">
					<view class="sayend" @click="reSay">重新说</view>
				</view>
			</view>
			<view class="audio_ing" v-show="audioInfo.audioIngShow">
				<view class="close_btn" @click="closeAudio">×</view>
				<view class="title">正在语音识别</view>
				<view class="audio_gif">
					<view class="audio_g">
						<view class="line line_h1 line1"></view>
						<view class="line line_h2 line2"></view>
						<view class="line line_h1 line3"></view>
						<view class="line line_h2 line4"></view>
					</view>
				</view>
				<view class="tips">请按以下格式说出命主信息，<text>可以只说生日</text></view>
				<view class="info">
					<view>
						<text>●</text> 性别：男/女
					</view>
					<view>
						<text>●</text> 生日：<text class="red">阴历或阳历</text>xxxx年x月xx日xx点xx分
					</view>
				</view>
				<view class="btn">
					<!-- <view class="resay">重新说</view> -->
					<view class="sayend" @click="sayEnd">说完了</view>
				</view>
			</view>
		</view>

		<v-menu v-show="false" @close="close" @open="open"></v-menu>
	</view>
</template>

<script>
	import vMenu from '@/components/menu/menu.vue'
	export default {
		components: {
			vMenu
		},
		data() {
			return {
				audioInfo: {
					audioIsShow: false,
					audioIngShow: false
				},
			}
		},
		onLoad() {

		},
		methods: {
			open(type) {
				// console.log('open');
				switch (type) {
					case 'menu':
						this.menuIsShow = true
						this.slider_left = '550rpx'
						break

					case 'sizhu':
						this.siZhuIsShow = true
						break
				}

			},
			close(type) {

				switch (type) {
					case 'menu':
						this.menuIsShow = false
						this.slider_left = 0
						break

					case 'sizhu':
						this.siZhuIsShow = false
						break
				}
				// console.log('close');
				this.chooseTimeIsShow = false
				// this.menuIsShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.sizhu-reverse-con {
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sizhu-reverse-con .sizhu-main {
		width: 673.61rpx;
		background-color: #fff;
		border-radius: 20.83rpx;

	}

	.sizhu-reverse-con .sizhu-main .title1 {
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
		padding: 52.5rpx 0 60.28rpx 0;
	}

	.sizhu-reverse-con .sizhu-main .tiangan-dizhi-c {
		width: 511.81rpx;
		height: 136.81rpx;
		border: 3.47rpx solid #ff6d1a;
		margin: 0 auto;
		border-radius: 3.47rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.sizhu-reverse-con .sizhu-main .tiangan-dizhi-c text {
		width: 20%;
		text-align: center;
		color: #84807e;
		font-size: 41.67rpx;
	}

	.sizhu-reverse-con .sizhu-main .title2 {
		display: flex;
		font-size: 44.72rpx;
		padding: 27.78rpx 0;
	}

	.sizhu-reverse-con .sizhu-main .title2 text {
		flex: 1;
		text-align: center;
	}

	.sizhu-reverse-con .sizhu-main .sz-con {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 34.72rpx;
		font-size: 50rpx;
	}

	.sizhu-reverse-con .sizhu-main .sz-con view {
		width: 85.42rpx;
		height: 85.42rpx;
		background-color: #84807e;
		text-align: center;
		color: white;
		line-height: 85.42rpx;
	}

	.sizhu-reverse-con .sizhu-main .sz-con view.active {
		background-color: #ff6d1a;
	}

	.sizhu-reverse-con .sizhu-main .yearc {
		color: #84807e;
		font-size: 20.83rpx;
		text-align: center;
		margin-top: 75rpx;
	}

	.sizhu-reverse-con .sizhu-btn-con {
		width: 569.44rpx;
		height: 63.89rpx;
		margin: 0 auto;
		display: flex;
		margin: 27.78rpx auto;

	}

	.sizhu-reverse-con .sizhu-btn-con view {
		height: 63.89rpx;
		color: white;
		text-align: center;
		width: 50%;
		line-height: 63.89rpx;

	}

	.sizhu-reverse-con .btn-cancel {
		background-color: #f4c343;
		border-top-left-radius: 63.89rpx;
		border-bottom-left-radius: 63.89rpx;
	}

	.sizhu-reverse-con .btn-confirm {
		background-color: #f08c36;
		border-top-right-radius: 63.89rpx;
		border-bottom-right-radius: 63.89rpx;
	}

	/* ----------------------------------------- */
	.fixed-more {
		position: fixed;
		width: 104.17rpx;
		height: 102.78rpx;
		background-color: #ededed;
		border: 1px solid #cdcdcd;
		border-left: none;
		border-top-right-radius: 102.78rpx;
		border-bottom-right-radius: 102.78rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
		bottom: 200rpx;
	}

	.fixed-more .inner {
		width: 76.39rpx;
		height: 76.39rpx;
		border-radius: 50%;
		background-color: #f96909;
		color: white;
		font-size: 33.33rpx;
		text-align: center;
		line-height: 76.39rpx;
	}

	.start-btn {
		width: 618.06rpx;
		height: 80.44rpx;
		line-height: 80.44rpx;
		border-radius: 80.44rpx;
		margin: 76.39rpx auto 0 auto;
		background-color: #ff6d1a;
		color: white;
		font-size: 41.67rpx;
		text-align: center;
	}

	.input_2_item {
		display: flex;
		color: #787878;
		padding-top: 27.78rpx;
		justify-content: space-between;
	}

	.input_2_item .t1 {
		font-size: 20.83rpx;
	}

	.input_2_item .t2 {
		font-size: 20.83rpx;
		display: flex;
	}

	.input_2_item .t2-2 {
		display: flex;
		padding-left: 10.42rpx;
	}

	.input_2_item .t3 {
		font-size: 20.83rpx;
	}

	.input_2_item .t3 switch {
		transform: scale(0.6)
	}

	/* --------------------------------------------- */

	.input_item {
		display: flex;
		border-bottom: 1px solid #b1b1b1;
		padding: 27.78rpx 0;
		justify-content: space-between;
		align-items: center;
	}

	.input_item .t1 {
		font-size: 33.33rpx;
		width: 90.28rpx
	}

	.input_item .input1 {
		width: 354.17rpx;
	}

	.input_item .bbb {
		color: #b5b5b5;
		font-size: 25rpx;
	}

	.input_item .t2 {
		border-left: 1px solid #b5b5b5;
		padding-left: 15.28rpx;
	}

	.input_item .radio-group {
		flex: 1;
		font-size: 25rpx;
	}

	.input_item .radio-group .radio {
		margin-left: 30rpx;
	}

	.input_item .ccc {
		color: #787878;
		font-size: 25rpx;
	}

	.input_item .use_audio {
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.input_item .use_audio image {
		width: 50rpx;
		height: 50rpx;

	}

	.input_item .area-info {
		font-size: 16.67rpx;
	}

	.input_item .area1 {
		flex: 1;
	}

	/* ---------------------------- */

	.audio_gif {

		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0;
		height: 160rpx;

		.audio_g {
			position: relative;
			width: 160rpx;
			height: 160rpx;
		}

		.line {
			width: 20rpx;
			background-color: red;
			float: left;
			margin: 0 10rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.line_h1 {
			height: 100rpx;
		}

		.line_h2 {
			height: 160rpx;
		}

		.line1 {
			left: 0rpx;
			animation-name: donghua1;
			/*绑定到keyframe的名称*/
			animation-timing-function: ease-in-out;
			/*规定动画的速度曲线*/
			animation-iteration-count: infinite;
			/*规定动画应该播放的次数*/
			animation-duration: 0.5s;
			/*动画所花费的时间*/
			animation-direction: alternate;
			/*是否应该轮流反向播放动画*/
		}

		.line2 {
			left: 40rpx;
			animation-name: donghua2;
			/*绑定到keyframe的名称*/
			animation-timing-function: ease-in-out;
			/*规定动画的速度曲线*/
			animation-iteration-count: infinite;
			/*规定动画应该播放的次数*/
			animation-duration: 0.5s;
			/*动画所花费的时间*/
			animation-direction: alternate;
			/*是否应该轮流反向播放动画*/
		}

		.line3 {
			left: 80rpx;
			animation-name: donghua1;
			/*绑定到keyframe的名称*/
			animation-timing-function: ease-in-out;
			/*规定动画的速度曲线*/
			animation-iteration-count: infinite;
			/*规定动画应该播放的次数*/
			animation-duration: 0.5s;
			/*动画所花费的时间*/
			animation-direction: alternate;
			/*是否应该轮流反向播放动画*/
		}

		.line4 {
			left: 120rpx;
			animation-name: donghua2;
			/*绑定到keyframe的名称*/
			animation-timing-function: ease-in-out;
			/*规定动画的速度曲线*/
			animation-iteration-count: infinite;
			/*规定动画应该播放的次数*/
			animation-duration: 0.5s;
			/*动画所花费的时间*/
			animation-direction: alternate;
			/*是否应该轮流反向播放动画*/
		}

	}

	// 声明动画
	@keyframes donghua1 {
		0% {
			height: 100rpx;
		}

		100% {
			height: 160rpx;
		}
	}

	@keyframes donghua2 {
		0% {
			height: 160rpx;
		}

		100% {
			height: 100rpx;
		}
	}

	.audio_error {
		.error {
			text-align: center;
			font-weight: bold;
			font-size: 35rpx;
			padding: 20rpx 0;
		}

		.msg {
			text-align: center;
			margin: 20rpx 0 50rpx 0;
		}

		.err_img {
			width: 300rpx;
			height: 300rpx;
			margin: 0 auto;
			display: block;
		}
	}

	.audio_mask {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.2);
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		// display: none;
	}

	.audio_ing,
	.audio_error {
		width: 650rpx;
		background-color: white;
		padding: 40rpx 20rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.audio_ing {
		.title {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.tips {
			font-weight: 600;

			text {
				color: red;
			}
		}

		.info {
			background-color: #fcf1e3;
			padding: 10rpx;
			line-height: 50rpx;
			margin-top: 15rpx;
			color: #666;

			text {
				color: #f6bf7a;
				padding-right: 10rpx;
			}

			text.red {
				color: red;
			}
		}

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40rpx 0;
		}

		.btn view {
			display: block;
			height: 65rpx;
			line-height: 65rpx;
			text-align: center;
			border-radius: 35rpx;
		}

		.btn .resay {
			background-color: #d8fada;
			color: #45b74c;
			width: 200rpx;
		}

		.btn .sayend {
			background: #45b74c;
			color: white;
			width: 350rpx;
			margin-left: 20rpx;
		}
	}

	.close_btn {
		position: absolute;
		right: 30rpx;
		top: 20rpx;
	}
</style>
